<template>
    <div id="myBuy">
    <div class="card-container">
        <van-list :offset="0" v-model="loading" :finished="finished" :immediate-check="check" @load="onLoad"> 
            <!-- list -->
            <div class="card-box" v-for="(item,index) in listData" :key="index">
                <!-- 上 -->
                <div class="card-top" v-if="lang == 'zh'">
                    订单编号：{{item.order_code}}
                    <p>{{item.buyer_state_txt}}</p>
                </div>
                 <div class="card-top" v-if="lang == 'en'">
                    Order number：{{item.order_code}}
                    <p>{{item.buyer_state_txt}}</p>
                </div>
                <!-- 中(有可能是多个) -->
                <div class="card-middle"  @click="goDetails(item)">
                    <div class="img-box">
                       <img :src="item.head_img">
                    </div>
                    <dl>
                        <dt style="display:-webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;text-overflow: ellipsis;">{{item.title}}</dt>
                        <dd>￥{{item.single_price}} <span>x{{item.purchase_num}}</span></dd>
                    </dl>
                </div>
                <div class="card-bottom" >
                    {{item.create_time}}
                    <!-- 买家状态：0待支付保证金、1已支付保证金、2已支付藏品金额、3交易完成、4保证金已退回、5保证金没收、6已关闭、7申请关闭
                        卖家状态：0待支付保证金、1已支付保证金、2已发货、3平台已验收、4平台已发货、5交易完成、6保证金已退回、7保证金没收、8拒绝售卖、9申请关闭 -->
                    <div class="handle-box" @click="goDetails(item)" v-if="lang == 'zh'">
                        <p v-if="(item.buyer_state == 0 && item.seller_state !=8)">申请交易关闭</p>

                        <p v-if="(item.buyer_state == 0 && item.seller_state !=8)">支付保证金</p> 
                        <p v-if="(item.buyer_state == 1)&& (item.seller_state <4)&&item.seller_state>1">支付藏品金额</p>
                        <p v-if="item.seller_state == 4 && item.buyer_state == 2">确认收货</p>   

                       <!-- <p class="look" v-if="
                         (item.buyer_state == 0 && item.seller_state == 8) || 
                         (item.buyer_state == 1 && item.seller_state == 8) ||
                         item.buyer_state>2||item.seller_state==5||item.seller_state==6 || item.seller_state == 9 ||
                         (item.buyer_state == 1 && item.seller_state !=2 && item.seller_state !=3) || 
                         (item.seller_state==3) ||(item.seller_state==2&&item.buyer_state==2) 
                         || (item.seller_state==3 && item.buyer_state!=1)
                         
                         ">查看交易</p> -->
                         
                        <p  class="look" v-if="
                            (item.buyer_state == 0 && item.seller_state == 8) || 
                            (item.buyer_state == 1 && item.seller_state == 8) ||
                            (item.buyer_state == 0 && item.seller_state==0) ||
                            (item.buyer_state == 0 && item.seller_state==1)  ||
                            item.buyer_state==3 ||  item.buyer_state==4 ||  item.buyer_state==5 ||  item.buyer_state==6 ||  item.buyer_state==7  ||
                         
                            item.seller_state==5||item.seller_state==6 || item.seller_state == 9 || (item.seller_state==3 && item.buyer_state!=1) ||
                            (item.buyer_state == 1 && item.seller_state !=2 && item.seller_state !=3) || 
                            (item.seller_state==2 && item.buyer_state==2)
                        
                        ">查看交易</p> 
                    </div>
                    <div class="handle-box" @click="goDetails(item)" v-if="lang =='en'">
                        <p v-if="(item.buyer_state == 0 && item.seller_state !=8)">Close</p>

                        <p v-if="(item.buyer_state == 0 && item.seller_state !=8)">Pay bond</p> 
                        <p v-if="(item.buyer_state == 1)&& (item.seller_state <4)&&item.seller_state>1">Pay Collection</p>
                        <p v-if="item.seller_state == 4 && item.buyer_state == 2">Confirm</p>   
                        <p  class="look" v-if="
                            (item.buyer_state == 0 && item.seller_state == 8) || 
                            (item.buyer_state == 1 && item.seller_state == 8) ||
                            (item.buyer_state == 0 && item.seller_state==0) ||
                            (item.buyer_state == 0 && item.seller_state==1)  ||
                            item.buyer_state==3 ||  item.buyer_state==4 ||  item.buyer_state==5 ||  item.buyer_state==6 ||  item.buyer_state==7  ||
                         
                            item.seller_state==5||item.seller_state==6 || item.seller_state == 9 || (item.seller_state==3 && item.buyer_state!=1) ||
                            (item.buyer_state == 1 && item.seller_state !=2 && item.seller_state !=3) || 
                            (item.seller_state==2 && item.buyer_state==2)
                        
                        ">view</p> 
                    </div>
                </div>
                <div class="card-order" >
                    <i v-if="lang == 'zh'">保证金：￥</i><i v-else >Bond：￥</i>{{item.seller_bond}}
                   <!-- 未支付 -->
                   <!-- <span class="red" v-if="item.buyer_state == 0 || item.seller_state==8 || (item.buyer_state == 6 && item.seller_state == 0)">
                       {{item.seller_state_txt}}
                    </span> -->
                    <!-- 已支付 -->
                     <!-- <span v-if="item.buyer_state ==1 || item.buyer_state ==2">
                       {{item.seller_state_txt}}
                    </span> -->
                    <!-- 已退回 -->
                    <!-- <span v-if="item.buyer_state ==4" >
                       {{item.seller_state_txt}}
                    </span> -->
                    <!-- 退回中 -->
                    <!-- <span v-if="item.seller_state == 5 && item.buyer_state != 4 " >
                       {{item.seller_state_txt}}
                    </span> -->
                      <!-- 已没收 -->
                     <!-- <span v-if="item.buyer_state == 5">
                       {{item.seller_state_txt}}
                    </span> -->
                     <!-- 冻结中 -->
                     <!-- <span v-else class="yellow">
                       {{item.seller_state_txt}}
                    </span> -->

                    <!-- 已支付或者已退回 -->
                    <!-- 1.已支付保证金并且卖家没有拒绝置换  2.支付藏品金额  3.保证金已退回情况  -->
                    <span class="green" v-if="(item.buyer_state == 1&&(item.seller_state !=8 && item.seller_state !=9))|| item.buyer_state == 2 || item.buyer_state ==4  ">{{item.seller_state_txt}}</span>
                    <!-- 未支付 -->
                    <span class="red" v-if="item.buyer_state ==0 || (item.seller_state == 0&& item.buyer_state == 6) ">{{item.seller_state_txt}}</span>
                    <!-- 冻结中、已没收 -->
                    <!-- 1.交易完成，保证金未退回状态都是冻结中  2.保证金没收   3.作为过错方申请关闭   4.卖家为过错方  交易申请关闭中 -->
                    <span class="red" v-if="item.buyer_state == 3 || item.buyer_state == 5 || item.buyer_state ==7 ||
                     (item.buyer_state ==6&&(item.seller_state == 7 || item.seller_state == 9 )) || (item.buyer_state ==1 &&(item.seller_state ==8 || item.seller_state ==9))">{{item.seller_state_txt}}</span>


                </div>
            </div>
        </van-list>
        <div class="nolist" v-if="finished && dataLength !=0 &&lang=='zh'">没有更多数据</div>
        <div class="nolist" v-if="dataLength==0 &&lang=='zh'">您还没有相关的订单</div>

        <div class="nolist" v-if="finished && dataLength !=0 &&lang=='en'">No more data</div>
        <div class="nolist" v-if="dataLength==0 &&lang=='en'">You do not have the relevant order yet.</div>
             <!-- loading -->
        <div class="loading-box" v-show="load">
            <van-loading type="spinner" color="white" />
        </div>
      </div>
    </div>
</template>

<script>
import { getmyPurchaseList } from '@/api/my/myBuy'
import { Tab, Tabs, List, Toast,Dialog , Loading,} from "vant";
export default {
  name: "message",
  components: {
    [List.name]: List,
    [Toast.name]: Toast,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Dialog .name]: Dialog ,
    [Loading.name]: Loading,
  },
  //声明组件
  data() {
    return {
      lang:'',//当前网页语言类型 zh 中文  en 英语 
      userId: 0, //用户id
      type: 2, //类型：1已支付、2待支付、3已完成、4已取消
      pageIndex: 1, //默认显示第一页
      pageSize: 10, //一页显示5条数据
      loading: false, //加载状态
      finished: false, //是否已加载完成，加载完成后不再触发load事件
      check: false, //显示加载中提示文案
      listData: [],//取到的列表数据 用来传到子组件
      dataLength:0,//数据listData长度
      load: false, //加载提示框 是否显示
      /****订单所涉及的所有状态
       * 
       * 买家状态：0待支付保证金、1已支付保证金、2已支付藏品金额、3交易完成、4保证金已退回、5保证金没收、6已关闭、7申请关闭
       * 卖家状态：0待支付保证金、1已支付保证金、2已发货、3平台已验收、4平台已发货、5交易完成、6保证金已退回、7保证金没收、8拒绝售卖、9申请关闭
       * 
       * ****/ 
    };
  },
  created() {
    //获得用户id  
    if(this.$route.query.userId && this.$route.query.userId > 0) {
        this.userId = this.$route.query.userId;
    } else {
        this.userId = window.localStorage.getItem("userId");
    }
    //获得语言类型lang
    if(this.$route.query.lang) {
        this.lang = this.$route.query.lang;
        // console.log(this.lang)
    }
    this.getList();//获取数据
  },
  methods: {
   //获得列表数据
      getList(){
        getmyPurchaseList(this.userId,this.pageIndex,this.pageSize,this.lang).then(res => {
            console.log(res);
            // debugger;
            if (res.code == 200) {
                let newAry = [];
                let data = res.data.list;
                data.forEach(element => {
                    let obj = {};
                    obj.create_time = element.create_time;
                    obj.head_img = element.head_img;
                    obj.title = element.title;
                    obj.order_code = element.order_code;
                    obj.seller_bond = element.seller_bond;
                    obj.id = element.id;
                    obj.purchase_num = element.purchase_num;
                    obj.single_price = element.single_price;
                    obj.pay_money = element.pay_money;
                    
                    obj.buyer_state = element.buyer_state;
                    obj.seller_state = element.seller_state;
                
                    /****订单所涉及的所有状态
                     * 
                     * 购买：
                    买家状态：0待支付保证金、1已支付保证金、2已支付藏品金额、3交易完成、4保证金已退回、5保证金没收、6已关闭、7申请关闭
                    卖家状态：0待支付保证金、1已支付保证金、2已发货、3平台已验收、4平台已发货、5交易完成、6保证金已退回、7保证金没收、8拒绝售卖、9申请关闭
                     * ****/ 
                    //此时  买家视角
                    //根据对方--卖家状态显示
                    if(element.seller_state == 0 && element.buyer_state !=6){
                        //买家未申请关闭交易
                        //卖家未支付保证金，   此时卖家 拥有拒绝售卖权限、或者支付保证金同意交易
                        if(this.lang == 'zh'){
                            obj.buyer_state_txt = "等待处理";
                        }else {
                            obj.buyer_state_txt = "waiting process";
                        }
                    }else if(element.seller_state == 0 && element.buyer_state ==0){
                        //买家未支付保证金 并申请关闭交易
                        //卖家未支付保证金，   此时卖家 拥有拒绝售卖权限、或者支付保证金同意交易
                        if(this.lang == 'zh'){
                             obj.buyer_state_txt = "交易关闭";
                        }else {
                            obj.buyer_state_txt = "closed";
                        }
                    }else if(element.seller_state == 1){
                        //卖家已支付保证金   等待卖家发货
                        if(this.lang == 'zh'){
                            obj.buyer_state_txt = "等待对方发货";
                        }else {
                            obj.buyer_state_txt = "wait for sending";
                        }
                    }else if(element.seller_state == 2){
                        //卖家已发货  买家开放支付藏品金额
                        if(this.lang == 'zh'){
                            obj.buyer_state_txt = "对方已发货";
                        }else {
                            obj.buyer_state_txt = "The other has shipped";
                        }
                    }else if(element.seller_state == 3){
                        //卖家发的货平台已接收   此时买家方判断是否已支付藏品金额：如果buyer_state == 2,开放查看交易按钮；如果buyer_state == 1，开放支付藏品金额按钮
                        if(this.lang == 'zh'){
                            obj.buyer_state_txt = "平台已验收";
                        }else {
                            obj.buyer_state_txt = "Platform has been accepted";
                        }
                    }else if(element.seller_state == 4){
                        //卖家发的货平台已发货   买家开放确认收货按钮
                        if(this.lang == 'zh'){
                            obj.buyer_state_txt = "平台已发货";
                        }else {
                            obj.buyer_state_txt = "Platform has been shipped";
                        }
                    }else if(element.seller_state == 5 || element.seller_state == 6){
                        //买家已确认收货所以双方状态均为：交易完成     //卖家保证金已退回，表示：交易完成
                        if(this.lang == 'zh'){
                            obj.buyer_state_txt = "交易完成";
                        }else {
                            obj.buyer_state_txt = "done";
                        }
                    }else if(element.seller_state == 7 || element.seller_state == 8){
                        //卖家保证金没收状态表示订单已关闭了    拒绝售卖：表示订单关闭
                        if(this.lang == 'zh'){
                            obj.buyer_state_txt = "交易关闭";
                        }else {
                            obj.buyer_state_txt = "closed";
                        }
                    }else if(element.seller_state == 9){
                        //卖家申请关闭交易  （需要后台审核通过后，交易才是关闭状态 ）  
                        if(this.lang == 'zh'){
                            obj.buyer_state_txt = "申请关闭中";
                        }else {
                            obj.buyer_state_txt = "Application for closure";
                        }
                    }else if(element.seller_state == 0 && element.buyer_state ==6){
                        //买家状态为已关闭
                        //卖家未支付保证金，  
                        if(this.lang == 'zh'){
                            obj.buyer_state_txt = "交易关闭";
                        }else {
                            obj.buyer_state_txt = "closed";
                        }
                    }

                     //买家状态：0待支付保证金、1已支付保证金、2已支付藏品金额、3交易完成、4保证金已退回、5保证金没收、6已关闭、7申请关闭
                    //卖家状态：0待支付保证金、1已支付保证金、2已发货、3平台已验收、4平台已发货、5交易完成、6保证金已退回、7保证金没收、8拒绝售卖、9申请关闭
                    
                    //买卖双方返回  保证金状态  具体参考上面注释
                    if(element.buyer_state == 0){
                        if(this.lang == 'zh'){
                            obj.seller_state_txt = "未支付";
                        }else{
                            obj.seller_state_txt = "Unpaid";
                        }
                    }
                    else if((element.buyer_state == 1 || element.buyer_state == 2 ) && (element.seller_state< 5)){
                        if(this.lang == 'zh'){
                            obj.seller_state_txt = "已支付";
                        }else{
                            obj.seller_state_txt = "Paid";
                        }
                    }
                    else if(element.buyer_state == 5){
                        if(this.lang == 'zh'){
                            obj.seller_state_txt = "已没收";
                        }else{
                            obj.seller_state_txt = "Confiscated";
                        }
                    }
                    else if(element.buyer_state == 4 ){
                        if(this.lang == 'zh'){
                            obj.seller_state_txt = "已退回";
                        }else{
                            obj.seller_state_txt = "Returned";
                        }
                    }    
                    else if(element.buyer_state == 6 && (element.seller_state == 8 || element.seller_state == 0)){
                        if(this.lang == 'zh'){
                            obj.seller_state_txt = "未支付";
                        }else{
                            obj.seller_state_txt = "Unpaid";
                        }
                    }
                    else if(element.buyer_state == 3 || (element.buyer_state ==1 && (element.seller_state ==8 || element.seller_state ==9))){
                        if(this.lang =='zh'){
                            obj.seller_state_txt = "冻结中";
                        }else{
                            obj.seller_state_txt = "Freezing";
                        }
                    }
                    newAry.push(obj);
                });
                //判断有没有数据了
                if(newAry.length>0){//有数据
                    this.listData = this.listData.concat(newAry);
                    this.loading = false;
                }else{//没有数据
                    this.finished = true;
                    this.loading = false;
                }
                // console.log(this.listData); 
                this.dataLength = this.listData.length; 
                this.load = false;
            } else {
               Toast(res.msg);
            }
        });
    }, 
    //滚动加载更多
    onLoad() {
      let _this = this;
        //  console.log("触发");
        _this.pageIndex++;//每触发一次 +1
            setTimeout(() => {
                _this.getList();
        }, 500);
    },
    //申请关闭交易
    applyClose(id){
        //跳转到详情页
    },
    //跳转到详情页
    goDetails(item){
        var _id = item.id;
        var buyer_state = item.buyer_state;//买家状态
        var seller_state = item.seller_state;//卖家状态

        var para = {};
        var title ='';
        if(this.lang == 'zh')
            title = '订单详情';
        else
            title = 'Order Details';
		para.title = title;//必须参数
        para.id = _id;//要跳转对象的id 不是必须参数
        //买家状态：0待支付保证金、1已支付保证金、2已支付藏品金额、3交易完成、4保证金已退回、5保证金没收、6已关闭、7申请关闭
        //卖家状态：0待支付保证金、1已支付保证金、2已发货、3平台已验收、4平台已发货、5交易完成、6保证金已退回、7保证金没收、8拒绝售卖、9申请关闭

        //根据不同状态跳转到不同的详情页面
        //1.未支付保证金
        if(buyer_state == 0 && (seller_state !=8 && seller_state !=9) || (buyer_state ==1 && seller_state == 2)){
             para.url = "/buyerpayBail?id="+_id+"&lang="+this.lang+"&userId="+this.userId; //必须参数 后面需要拼接h5所需参数，如:lang=zh,等等 
        }else if(buyer_state ==1 && seller_state==3){
              para.url = "/buyerpayBail?id="+_id+"&lang="+this.lang+"&userId="+this.userId; //必须参数 后面需要拼接h5所需参数，如:lang=zh,等等 
        }
        //2.订单详情
        else{
             para.url = "/buyerorderClose?id="+_id+"&lang="+this.lang+"&userId="+this.userId; //必须参数 后面需要拼接h5所需参数，如:lang=zh,等等 
        }
        console.log(para)
        this.interaction.hLink(para);
    }
  }
};
</script>
<style lang="stylus" scoped>
*{
    box-sizing:border-box;
}
#myBuy{
    background :#f1f1f1;
}
.card-box{
    background: #fff;
   
    padding-bottom :0;
    border-bottom: 1px solid #f1f1f1;
    overflow: hidden;
    margin-bottom :.186667rem;
    // 上
    .card-top{
        height :1.013333rem;
        line-height :1.013333rem;
        font-size:.32rem;
        padding:0 .213333rem;
        color:#a2a2a2;
        p{
            color:#cb9c57;
            float:right;
        }
        .floatl{
            float:left;
        }
    }
    // 中
    .card-middle{
        overflow:hidden;
        background:#f5f5f5;
        padding:.266667rem;
        width:100%;
        .img-box{
            width :2.133333rem;
            height :2.133333rem;
            float:left;
            position:relative;
            img{
                width :100%;
                margin :0;
                height 100%;
            }
        }
        dl{
            float:left;
            width :73%;
            margin-left :3.3%
            position :relative;
            height: 2.133333rem;
            dt{
                font-family:PingFangSC-Regular;
                font-size:.373333rem;
                color:#494949;
                letter-spacing:.008rem;
                line-height:.533333rem;
                text-align:left;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;
            }
             dd{
                position:absolute;
                bottom :0;   
                font-family:PingFangSC-Medium;
                font-size:13px;
                color:#cb9c57;
                letter-spacing:0;
                text-align:left;
                width :100%;
                span{
                    font-family:PingFangSC-Regular;
                    font-size:.346667rem;
                    color:#2d2d2d;
                    letter-spacing:0;
                    text-align:right;
                    position:absolute;
                    right :0;
                }             
            }
        }
    }
    // 下
    .card-bottom{
        border-bottom: 1px solid #f5f5f5;
        overflow: hidden;
        padding:0 .266667rem;
        height :1.013333rem;
        line-height :1.013333rem;
        box-sizing :border-box;
        font-family:PingFangSC-Regular;
        font-size:.346667rem;
        position:relative;
        color:#cb9c57;
        .handle-box{
            position:absolute;
            right:.266667rem;
            top:0;
            height: 1.013333rem;

            p{
                float:left;
                margin-left :.533333rem;
                font-size:.346667rem;
            }
            p:last-child{
                background:#cb9c57;
                border-radius:100px;
                //width:2.213333rem;
                padding: 0 .266667rem;
                height:.693333rem;
                text-align :center;
                line-height :.693333rem;
                font-family:PingFangSC-Medium;
                color:#ffffff;
                margin-top :.16rem;
            }
            p.look{
                color:#cb9c57;
                background:#ffffff;
                border:1px solid #cb9c57;
                border-radius:100px;
                //width:2.16rem;
                font-family:PingFangSC-Regular;
                font-size:.346667rem;
                color:#cb9c57;
                text-align:center;
                height:.64rem;
                line-height :.64rem;
            }

        }
    }
    // 下
    .card-order{
        padding:0 .266667rem;
        height :1.013333rem;
        line-height :1.013333rem;
        font-family:PingFangSC-Medium;
        font-size:.346667rem;
        color:#494949;
        span{
            font-family:PingFangSC-Regular;
            font-size:.346667rem;
            float:right;
            color:#58a701;
            &.yellow{
                 color:#cb9c57;
            }
            &.red{
              color:#d84053;
            }
            &.yue{
              color:#d84053;
            }
        }
    }
}
.nolist{
	font-size: 0.32rem;
	color: #A2A2A2;
	text-align: center;
	padding: 0.533333rem 0;
}

.loading-box{
    width :50px;
    height :50px;
    border-radius :3px;
    background :rgba(0,0,0,.5);
    position :fixed;
    left :50%;
    top:50%;
    margin-left:-25px;
    margin-top :-25px;
    z-index :999999;
    text-align :center;
    vertical-align :middle;
    .van-loading{
       left :50%;
       top:50%;
       margin-left :-15px;
       margin-top :-15px;
    }
}
</style>

